<template>
  <div class="wrap">
    <div class="item-box">
      <div class="chart">
        <img src="@/assets/home/chart-list-bg1@2.png" />
        <p class="pa">用水量</p>
        <p class="pb">(m3)</p>
      </div>
      <div class="text-box">
        <p class="pa">{{homeStore.waterConsumptionData.today}}</p>
        <div class="line-box-a">
          <span class="spa">今</span>
          <div class="line-color">
            <div :class="`color_bg_${color(homeStore.waterConsumptionData)}`" :style="`width: ${width(homeStore.waterConsumptionData)};`"></div>
          </div>
          <span class="spb">{{homeStore.waterConsumptionData.today}}</span>
        </div>
        <div class="line-box-a">
          <span class="spa">昨</span>
          <div class="line-color">
            <div class="color_bg_2" :style="`width: ${lowWidth(homeStore.waterConsumptionData)};`"></div>
          </div>
          <span class="spb">{{homeStore.waterConsumptionData.yesterday}}</span>
        </div>
        <p :class="`pb color_${color(homeStore.waterConsumptionData)}`">{{homeStore.waterConsumptionData.increaseRate}}</p>
      </div>
    </div>

    <div class="item-box">
      <div class="chart">
        <img src="@/assets/home/chart-list-bg2@2.png" />
        <p class="pa">用电量</p>
        <p class="pb">(KW)</p>
      </div>
      <div class="text-box">
        <p class="pa">{{homeStore.powerConsumptionData.today}}</p>
        <div class="line-box-a">
          <span class="spa">今</span>
          <div class="line-color">
            <div :class="`color_bg_${color(homeStore.powerConsumptionData)}`" :style="`width: ${width(homeStore.powerConsumptionData)};`"></div>
          </div>
          <span class="spb">{{homeStore.powerConsumptionData.today}}</span>
        </div>
        <div class="line-box-a">
          <span class="spa">昨</span>
          <div class="line-color">
            <div class="color_bg_2" :style="`width: ${lowWidth(homeStore.powerConsumptionData)};`"></div>
          </div>
          <span class="spb">{{homeStore.powerConsumptionData.yesterday}}</span>
        </div>
        <p :class="`pb color_${color(homeStore.powerConsumptionData)}`">{{homeStore.powerConsumptionData.increaseRate}}</p>
      </div>
    </div>


    <div class="item-box">
      <div class="chart">
        <img src="@/assets/home/chart-list-bg3@2.png" />
        <p class="pa">用气量</p>
        <p class="pb">(m3)</p>
      </div>
      <div class="text-box">
        <p class="pa">{{homeStore.gasConsumptionData.today}}</p>
        <div class="line-box-a">
          <span class="spa">今</span>
          <div class="line-color">
            <div :class="`color_bg_${color(homeStore.gasConsumptionData)}`" :style="`width: ${width(homeStore.gasConsumptionData)};`"></div>
          </div>
          <span class="spb">{{homeStore.gasConsumptionData.today}}</span>
        </div>
        <div class="line-box-a">
          <span class="spa">昨</span>
          <div class="line-color">
            <div class="color_bg_2" :style="`width: ${lowWidth(homeStore.gasConsumptionData)};`"></div>
          </div>
          <span class="spb">{{homeStore.gasConsumptionData.yesterday}}</span>
        </div>
        <p :class="`pb color_${color(homeStore.gasConsumptionData)}`">{{homeStore.gasConsumptionData.increaseRate}}</p>
      </div>
    </div>


    <div class="item-box">
      <div class="chart">
        <img src="@/assets/home/chart-list-bg4@2.png" />
        <p class="pa">标煤</p>
        <p class="pb">(tce)</p>
      </div>
      <div class="text-box">
        <p class="pa">{{homeStore.standardCoalQuantity.today}}</p>
        <div class="line-box-a">
          <span class="spa">今</span>
          <div class="line-color">
            <div :class="`color_bg_${color(homeStore.standardCoalQuantity)}`" :style="`width: ${width(homeStore.standardCoalQuantity)};`"></div>
          </div>
          <span class="spb">{{homeStore.standardCoalQuantity.today}}</span>
        </div>
        <div class="line-box-a">
          <span class="spa">昨</span>
          <div class="line-color">
            <div class="color_bg_2" :style="`width: ${lowWidth(homeStore.standardCoalQuantity)};`"></div>
          </div>
          <span class="spb">{{homeStore.standardCoalQuantity.yesterday}}</span>
        </div>
        <p :class="`pb color_${color(homeStore.standardCoalQuantity)}`">{{homeStore.standardCoalQuantity.increaseRate}}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useHomeStore } from '@/Store/homeStore';


const homeStore = useHomeStore();
const color = (data) => {
  if(Number(data.today) > Number(data.yesterday)) {
    return '1';
  } else if(Number(data.today) == Number(data.yesterday)) {
    return '4';
  } else {
    return '3';
  }
}


const widthFull = 75;
const width = (data) => {
  if(Number(data.today) > Number(data.yesterday)) {
    return `${widthFull}px`;
  } else if(Number(data.today) == Number(data.yesterday)) {
    return `${widthFull}px`;
  } else {
    return `${Number(data.today)/Number(data.yesterday) * widthFull}px`;
  }
}

const lowWidth = (data) => {
  if(Number(data.today) > Number(data.yesterday)) {
    return `${Number(data.yesterday)/Number(data.today) * widthFull}px`;
  } else if(Number(data.today) == Number(data.yesterday)) {
    return `${widthFull}px`;
  } else {
    return `${widthFull}px`;
  }
}

</script>

<style lang="scss" scoped>



.wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  .item-box{
     margin: 0 17px;
     display: flex;
     flex-wrap: nowrap;
     .chart{
      width: 144.29px;
      height: 145.9px;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      img {
        width: 144.29px;
        height: 145.9px;
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 0;
      }
      p {
        margin: 0;
        position: relative;
        z-index: 1;
      }
      p.pa {
        font-size: 24px;
        font-weight: 700;
        letter-spacing: 0px;
        line-height: 22px;
        color: rgba(255, 255, 255, 1);
        font-size: 20px;
        font-weight: 700;
        margin-top: 38px;
      }
      p.pb {
        font-size: 24px;
        font-weight: 700;
        letter-spacing: 0px;
        line-height: 22px;
        color: rgba(255, 255, 255, 1);
        font-size: 20px;
        font-weight: 700;
      }
     }
     .text-box{
      flex: 1;
      margin-left: 9.71px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      .line-box-a{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: nowrap;
        .line-color{
          height: 11px;
          > div {
            height: 100%;
          }
        }
        .spa {
          font-size: 14px;
          font-weight: 700;
          letter-spacing: 0px;
          line-height: 22px;
          color: rgba(255, 255, 255, 1);
          text-align: center;
          vertical-align: top;
          margin-right: 5px;
        }
        .spb {
          font-size: 14px;
          font-weight: 700;
          letter-spacing: 0px;
          line-height: 22px;
          color: rgba(255, 255, 255, 1);
          text-align: left;
          vertical-align: top;
          margin-left: 8px;
        }
      }
      p{
        margin: 0;
        text-indent: 15px;
      }
      p.pa {
        font-size: 35px;
        font-weight: 900;
        line-height: 49.36px;
        color: rgba(255, 255, 255, 1);
        text-align: center;
        vertical-align: top;
      }
      p.pb {
        font-size: 25px;
        font-weight: 900;
        letter-spacing: 0px;
        line-height: 35.25px;
        color: rgba(255, 87, 51, 1);
        text-align: center;
        vertical-align: top;
        margin-top: 6px;
      }
     }
  }
}

.color_bg_1 {
  background-color: rgba(255, 87, 51, 1);
}

.color_bg_2 {
  background-color: rgba(229, 229, 229, 1);
}

.color_bg_3 {
  background-color: rgba(0, 255, 102, 1);
}

.color_bg_4 {
  background-color: rgba(0, 170, 255, 1);
}


.color_1 {
  color: rgba(255, 87, 51, 1) !important;
}

.color_2 {
  color: rgba(229, 229, 229, 1) !important;
}

.color_3 {
  color: rgba(0, 255, 102, 1) !important;
}

.color_4 {
  color: rgba(0, 170, 255, 1) !important;
}
</style>